<template>
  <div>
    <el-input placeholder="请输入商品名称" v-model="filterText" style="font-size: 16px;"></el-input>
    <el-tree class="filter-tree" :data="BrrData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all :filter-node-method="filterNode" ref="tree" :render-content="renderContent"></el-tree>
  </div>
</template>

<script>
export default {
  name: "skillConfigB",
  props: ["BrrData"],
  data () {
    return {
      defaultProps: {
        children: "classifySubList",
        label: "classifyName"
      },
      isBaoCUN: false,
      dialogVisible: false,
      isactTitle: [],
      skillType: "",
      skillName: [],
      Bskill: [],
      skillList: [],
      filterText: "",
      isact: "",
      skillType: "",
      curNode: undefined //当前选中节点
    };
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true;
      return data.classifyName.indexOf(value) !== -1;
    },
    // 优化
    handleNodeClick (pdata) {
      this.curNode = pdata;
      document
        .getElementsByClassName("el-tree-node__content")[0]
        .setAttribute("class", "el-tree-node__content");
    },
    //底层代码
    renderContent (h, { node, data, store }) {
      return (
        <span style="width:100%; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
          <span style="width:100%; display: flex; align-items: center; justify-content: space-between;">
            <span class="left">{node.label}</span>
            <span>
              <span class="right">
                {data.goodsCode !== this.goodsCode && this.isBaoCUN == false ? (
                  <input class="input-default" onChange={this.handleChangeTitle.bind(this)} value={data.skillName}
                  ></input>
                ) : data.goodsCode !== this.goodsCode && this.isBaoCUN == true ? (
                  <input class="input-default" onChange={this.handleChangeTitle.bind(this)} value={data.skillName}
                  ></input>
                ) : (
                  <span></span>
                )}
                {data.goodsCode !== this.goodsCode ? (
                  <el-button style="background-color:#fd804c;color: #fff;" on-click={() => this.updateGroup(node, data, this.isactTitle)}> 保存
                  </el-button>
                ) : (
                  <span></span>
                )}
              </span>
            </span>
          </span>
        </span>
      );
    },
    //输入框
    handleChangeTitle (e) {
      this.isactTitle = e.target.value;
      this.isBaoCUN = true
    },
    //保存
    updateGroup (node, data) {
      this.isBaoCUN = false;
      if (this.isactTitle == "") {
        this.$message.warning("名称不能为空");
        return;
      } else {
        //修改数据组
        this.isUpdateGroup = false;
        const parent = node.parent;
        const children = parent.data.classifySubList || parent.data;
        const index = children.findIndex(d => d.goodsCode === data.goodsCode);
        let temp = data;
        temp.skillName = this.isactTitle;
        console.log(data.skillName)
        this.$message.success('保存成功')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-input {
  margin-top: 10px;
}
.el-tree {
  margin-top: 10px;
}
.el-tree .bagfist {
  display: block;
}
.el-tree ::v-deep .el-button--default {
  padding: 4px 12px;
  color: #fff;
  background-color: #409eff;
  margin-left: 15px;
}
.el-tree ::v-deep .input-default {
  margin-left: 15px;
}
::v-deep .el-dialog__body {
  padding-top: 0px;
  height: 330px;
}
</style>
